<template>
  <div>
    <h2>{{msg}}</h2>
    <h3>{{count}}</h3>
    <p>
      <button @click="add(100)">+</button>
      <button @click="reduce">-</button>
    </p>
    <p>
      <button @click="addAction(1)">+</button>
      <button @click="reduceAction">-</button>
    </p>
  </div>
</template>

<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
  export default {
    data() {
      return {
        msg: 'hello vuex'
      }
    },
    computed:{
      ...mapState(['count']),
      ...mapGetters(['count'])
      // count(){
      //   return this.$store.state.a.count;
      // }
    },
    methods:{
      ...mapMutations(['add','reduce']),
      ...mapActions(['addAction','reduceAction'])
    }
    
  }
</script>

<style scoped>

</style>